<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>让坦克开起来</title>
		<style type="text/css">
			input{font-size:26px;margin-top: 20px;}
			body{background-image: url(images/grassland.png);}
			#mytank{position: absolute;left:10px;top:100px}
		</style>
	</head>
	<body>		
		<img id="mytank" src="images/right.png"/>
		<script>
			// 编写代码，让坦克能上下左右移动
//			document.onkeydown=function(e){
//				if(e.keyCode=="W"){
//					console.log("向上");
//				}else if(e.keyCode=="S"){
//					console.log("向下");
//				}else if(e.keyCode=="A"){
//					console.log("向左");
//				}else if(e.keyCode=="D"){
//					console.log("向右");
//				}
//			}
		// document.oncontextmenu=function(){
		// 	alert("当前界面禁用右键！");
		// 	return false;
		// }
        // var Aimg = document.querySelector('img');
		// var style = getComputedStyle(Aimg);
		// var N = parseInt(style.left);
		// var T = parseInt(style.top);
		// //记录图片的初始位置
		// window.onkeydown=function(e){
		// 	console.log(e.key);
		// 	switch(e.key){
		// 		case 'ArrowUp':
		// 			Aimg.src='images/up.png';
		// 			T = T - 10;
		// 			Aimg.style.top = T + 'px';
		// 			break;
		// 		case 'ArrowDown':
		// 			Aimg.src='images/down.png';
		// 			T = T + 10;
		// 			Aimg.style.top = T + 'px';
		// 			break;
		// 		case 'ArrowLeft':
		// 		    Aimg.src='images/left.png';
		// 			N = N - 10;
		// 			Aimg.style.left = N + 'px';
		// 			break;
		// 		case 'ArrowRight':
		// 			Aimg.src='images/right.png';
		// 			N = N + 10;
		// 			Aimg.style.left = N + 'px';
		// 			break;
		// 	}
		// }

		// document.onmousedown=function(){
		// 		if(event.button==2){
		// 			alert("当前界面禁用右键！");
		// 			return false;
		// 		}
		// 	}
		// var otank = document.getElementById("mytank");
        // console.log(otank);

        // document.onkeydown = function(eve){
        //     var code = eve.keyCode || eve.which;
        //     // console.log(code);
        //     var N =  otank.offsetLeft;
        //     var T =  otank.offsetTop;
        //     var current = 0;
            
        //     if(code == 37||code==65){N -= 10;
            //     current = (current)%360;
            //     otank.style.transform = 'rotate('+current+'deg)';
            // };
            // if(code == 38||code==87){T -= 10;
            //     current = (current+90)%360;
            //     otank.style.transform = 'rotate('+current+'deg)';
            // };
            // if(code == 39||code==68){N += 10;
            //     current = (current+180)%360;
            //     otank.style.transform = 'rotate('+current+'deg)';
            // };
            // if(code == 40||code==83){T += 10;
            //     current = (current+270)%360;
            //     otank.style.transform = 'rotate('+current+'deg)';
            // };
            
        //     otank.style.top = T + "px";
        //     otank.style.left = N + "px";
			
        // }
		// var otank = document.querySelector("#mytank");



		//199000846 杨紫玲
		var otank = document.querySelector('img');
		var style = getComputedStyle(otank);
		document.onkeydown = function(e){
			if(e.keyCode == "87" || e.keyCode == "38"){
				otank.src='images/up.png';
				otank.style.top = otank.offsetTop - 10 + "px";
			}
			else if(e.keyCode == "83" || e.keyCode == "40"){
				otank.src='images/down.png';
				otank.style.top = otank.offsetTop + 10 + "px";
			}
			else if(e.keyCode == "65" ||e.keyCode == "37"){
				otank.src='images/left.png';
				otank.style.left = otank.offsetLeft - 10 + "px";
			}
			else if(e.keyCode == "68" ||e.keyCode == "39"){
				otank.src='images/right.png';
				otank.style.left = otank.offsetLeft + 10 + "px";
			}
		}
		//199000846 杨紫玲
		document.onmousedown=function(){
				if(event.button==2){
					alert("当前界面禁用右键！");
					return false;
				}
			}
		</script>
	</body>
</html>
